<template>
  <div class="lineChart"></div>
</template>

<script>
import mockdata from '@/assets/data/page1/part1.json'
export default {
  name: "part1",
  props: {
    selectRangeDate: Array,
  },
  data() {
    return {
      myChart: null,
      xData: [],
      yData: []
    };
  },
  methods: {
    setData() {
      // 组装数据
      for (let item of mockdata) {
        this.xData.push(item.year)
        this.yData.push(item.count)
      }
    },
    // 上网行为分析
    setChart() {


      let option = {
        xAxis: {
          type: 'category',
          data: this.xData,
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1a3c58",
            },
          },
          name: "年份",
          nameTextStyle: {
            color: "#75deef",
            fontSize: 10,
            padding: [0, 15, -10, 0],
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#75deef",
            fontSize: 9,
            fontWeight: "normal",
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: "#1a3c58",
            },
          },
          name: "(个)",
          nameTextStyle: {
            color: "#75deef",
            fontSize: 10,
            padding: [0, 15, -10, 0],
          },
          axisTick: {
            show: true,
          },
          axisLabel: {
            showMaxLabel: true,
            color: "#75deef",
            fontSize: 9,
            fontWeight: "normal",
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#1a3c58",
            },
          },
        },
        series: [
          {
            data: this.yData,
            type: 'line',
            color: '#feac2c'
          }
        ]
      };

      if (!this.myChart) this.myChart = this.$echarts(this.$el);
      this.myChart.clear();
      this.myChart.resize();
      this.myChart.setOption(option);
    },
  },
  watch: {
    selectRangeDate: function () {
      // 检测selectRangeDate 数据变化
      this.setChart();
    },
  },
  mounted() {
    this.setData()
    this.setChart();
  },
};
</script>


<style lang="less" scoped>
.lineChart {
  width: 100%;
  height: 100%;
}
</style>
